<template>
  <div class="ordertj-box">
    <div class="content-box w-card">
      <div>
        <div class="title-box">
          <span>订单统计</span>
        </div>
        <div class="search-box">
          <div class="change-tab">
            <div v-for="item in cTabList" :key="item" :class="{'active':changeTabActive == item.value}"
              @click="tabChange(item.value)">{{ item.label }}</div>
          </div>
          <el-select size="small" style="width:200px;" v-model="shop" placeholder="选择商铺" multiple collapse-tags clearable
            filterable @change="shopChange">
            <el-option v-for="item in shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
          </el-select>
          <div class="time-box">
            <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              size="small" @change="dateChange" />
          </div>
        </div>
      </div>
      <div class="line-box" :style="{'height':tableHeight+'px'}">
        <div v-for="(item,index) in lineList" :key="item">
          <line-chart :ref="lineRef" :id="'order'+index" :minInterval="1" :xData="item.xData" :yData="item.yData"
            :lineTitle="item.title" :height="(tableHeight/2) - 40" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lineChart from '@/components/lineChart.vue'
import { onBeforeUpdate, onMounted, reactive, toRefs } from 'vue'
import api from './api'
import { getWindowWidthAndHeight, warningDeal } from '@/utils/utils'
export default {
  components: {
    lineChart,
  },
  setup() {
    let itemRefs = []
    let lineRef = (el) => {
      if (el) {
        itemRefs.push(el);
      }
    }

    const state = reactive({
      tableHeight: 0,
      changeTabActive: 'day',
      date: [new Date(new Date(new Date().toLocaleDateString()).getTime() - 518400000), new Date(new Date(new Date().toLocaleDateString()).getTime() + 3600 * 1000 * 24 - 1000)],
      shop: null,
      cTabList: [
        {
          value: 'day',
          label: '按日',
        },
        {
          value: 'week',
          label: '按周',
        },
        {
          value: 'month',
          label: '按月',
        },
        {
          value: 'year',
          label: '按年',
        },
      ],
      lineList: [
        {
          id: 'orderSelf',
          title: '销售订单',
          xData: [],
          yData: [],
        },
        {
          id: 'orderPromotion',
          title: '分销订单',
          xData: [],
          yData: [],
        },
        {
          id: 'orderProduceAuto',
          title: '自动生产订单',
          xData: [],
          yData: [],
        },
        {
          id: 'orderProduceManu',
          title: '手动生产订单',
          xData: [],
          yData: [],
        },
      ],
      shopOptions: [],
    })

    function setXYData(list) {
      state.lineList.map(item => {
        item.xData = []
        item.yData = []
      })
      list && list.map(item => {
        state.lineList.map((items, index) => {
          items.yData.push(item[items.id])
          items.xData.push(item.date)
        })
      })
    }

    function getLineChartData() {
      const obj = {
        shopId: (state.shop && state.shop.length > 0) ? state.shop.join(',') : '',
        groupType: state.changeTabActive,
        startTime: (state.date && state.date[0]) ? state.date[0].getTime() : null,
        endTime: (state.date && state.date[1]) ? state.date[1].getTime() : null,
      }
      api.staticsOrder(obj).then(res => {
        if (res.code == '200') {
          setXYData(res.data.list)
          itemRefs.map(item => {
            item.init()
          })
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function dateChange(e) {
      getLineChartData()
    }

    function shopChange(e) {
      getLineChartData()
    }

    function tabChange(e) {
      state.changeTabActive = e
      getLineChartData()
    }

    function getShup() {
      api.chooseShop().then(res => {
        if (res.code == '200') {
          state.shopOptions = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 260
      getShup()
      getLineChartData()
    })

    onBeforeUpdate(() => {
      itemRefs = [];
    })

    return {
      ...toRefs(state),
      lineRef,
      tabChange,
      dateChange,
      shopChange,
    }
  }
}
</script>

<style lang="scss" scoped>
.ordertj-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  .content-box {
    width: 100%;
    flex-grow: 1;
    box-sizing: border-box;
    padding: 20px;
    .title-box {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      > span {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .search-box {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      .time-box {
        width: 40%;
        :deep(.el-input__wrapper) {
          flex-grow: 0;
          width: 100% !important;
        }
      }
    }
  }
}
.line-box {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  > div {
    width: calc(50% - 10px);
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    padding: 20px;
  }
}
</style>